<template>
  <view class="container">
	<uni-forms ref="form" :model="queryParams" labelWidth="80px" label-position="top">
		<view class="header-pannel">
			<view class="null-pannel"></view>
			<view class="example">
				
				<uni-forms-item label="报废条码" name="queryCode" class="item-margin">
				  <uni-easyinput v-model="queryParams.queryCode" placeholder="请输入报废条码" :focus="inpFocus" ref="queryCodeRef"/>
				</uni-forms-item>
				
				<uni-forms-item label="报废原因" name="defectiveItem" class="item-margin">
						<radio-group class="radio-group" @change="radioChange">
							<div v-for="(item, index) in dictDataList" :key="item.value" 
								 class="custom-list-item" 
								 :class="{'selected': selectedValue === item.value}"
								 @click="selectItem(item.value)">
								<div class="radio-slot">
									<radio :value="item.value" :checked="selectedValue === item.value" />
								</div>
								<div class="content-slot">
									<div class="item-title">{{ item.label }}</div>
									<div class="item-note">{{ item.remark }}</div>
								</div>
							</div>
						</radio-group>
					</uni-forms-item>
			</view>
		</view>
	</uni-forms>
	
	<view class="footer-btn">
		<button type="primary" @click="submit">提交</button>
	</view>
	
	
	<!-- 提示框 -->
	<view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
	
  </view>
  
</template>

<script>
	import { createDefectiveProductRecord } from "@/api/longyi/productScrap/Index.js"
  import { dictDataList } from "@/api/system/dict.js"
	
	export default {
	  data() {
	    return {
			type: 'center',
			msgType: 'success',
			messageText: '这是一条成功提示',
			dictDataList: [],
			inpFocus: true,
			queryParams: {
				queryCode: null,
				defectiveItem: null
			},
			selectedValue: ''
	    }
	  },
	  onReady() {
	    this.inpFocus = true
		this.loadDictDataList()
	  },
	  computed: {
		  selectedLabel() {
			  if (!this.selectedValue) return '';
			  const item = this.dictDataList.find(item => item.value === this.selectedValue);
			  this.queryParams.defectiveItem = item;
			  return item ? item.label : '';
		  },
		  selectedRemark() {
			  if (!this.selectedValue) return '';
			  const item = this.dictDataList.find(item => item.value === this.selectedValue);
			  this.queryParams.defectiveItem = item;
			  return item ? item.remark : '';
		  }
	  },
	  methods: {
		  loadDictDataList(){
			  dictDataList('product_scrap_reason').then(response => {
				  this.dictDataList = response.data.list;
			  })
		  },
			submit(){
				createDefectiveProductRecord(this.queryParams).then(response => {
					this.resetForm();
				});
			},
			resetForm() {
				this.queryParams = {
					queryCode: '',
					defectiveItem: ''
				};
				this.selectedValue = '';
				
				this.setFocus();
			},
			setFocus() {
				this.inpFocus = false;
				
				this.$nextTick(() => {
					this.inpFocus = true;
				});
			},
			dialogClose(){
				this.$refs.alertDialog.close()
			},
			radioChange(event){
				this.queryParams.defectiveItem = event.detail.value;
			},
			selectItem(value) {
				this.selectedValue = value;
				this.queryParams.defectiveItem = value;
				this.$emit('change', { detail: { value } });
			}
			
	  }
	}
</script>

<style lang="scss">
  .example {
    padding: 15px;
    background-color: #fff;
	// margin: 10px auto;
	.item-margin.is-direction-left {
	    margin-bottom: 15px !important;
	}
	
  }
  .margin0 {
      margin-bottom: 0 !important;
  }
  .header-pannel{
	  position: fixed;
	  width: 100%;
	  top: 44px;
	  z-index: 999;
  }
  .null-pannel{
	  height: 10px;
	  background: #f1f1f1;
  }
  .footer-btn{
  	  padding: 15px;
  	  background-color: #fff;
  	  // margin-top: 66px;
  	  position: fixed;
  	  width: 100%;
  	  bottom: 0;
  }
  .container {
      /**
	  overflow: hidden;
	  */
  }
  .popcontent{
	  padding: 15px;
	  border-radius: 11px;
	  background-color: #fff;
	  width: 95vw;
	  overflow-x: scroll;
	  // height: 500px;
	      // overflow-y: scroll;
  }
  .float-right{
	  float: right;
  }
  .border1{
	  border: 0.5px solid #eee;
	  margin: 15px 0;
  }
  .padding-bottom{
  	  padding: 15px;
  }
  .padding-top{
  	  padding: 10px;
  }
  .tableAll{
	  word-break: break-all;
  }
  .table1{
	  margin-bottom: 90px;
	  margin-top: 140px;
  }
          
  .custom-list-item {
	  display: flex;
	  align-items: center;
	  padding: 16px 20px;
	  border-bottom: 1px solid #eee;
	  transition: all 0.3s ease;
	  cursor: pointer;
  }
  
  .custom-list-item:last-child {
	  border-bottom: none;
  }
  
  .custom-list-item:hover {
	  background-color: #f8f9fa;
  }
  
  .custom-list-item.selected {
	  background-color: #e8f4ff;
	  border-left: 4px solid #1890ff;
  }
  
  .radio-slot {
	  margin-right: 16px;
	  display: flex;
	  align-items: center;
  }
  
  .content-slot {
	  flex: 1;
	  width: 1000rpx;
  }
  
  .item-title {
	  font-size: 16px;
	  font-weight: 500;
	  color: #2c3e50;
	  margin-bottom: 4px;
  }
  
  .item-note {
	  font-size: 14px;
	  color: #7f8c8d;
	  line-height: 1.4;
  }
</style>